<template>
	<view class="bg-white rounded-4 py-4 pl-4 pr-2 flex flex-center coupon">
		<slot name="head">
			<view class="flex flex-column flex-center w-90px">
				<x-money type="danger-light-3" unit-type="danger-light-3" weight="bold" size="8"
					:money="props.item.money" unit="">
					<template #prefix>
						<text class="h10 text-danger-light-3">￥</text>
					</template>
				</x-money>
				<view class="text-danger-light-3 h10">
					最高可减
				</view>
			</view>
		</slot>
		<view class="py-3 border-left border-left-3 border-left-danger-light-9"></view>
		<slot name="content">
			<view class="flex flex-column px-4 flex-1 grid-gap-1">
				<view class="font-weight-600 h9">
					{{ props.item.title }}
				</view>
				<text class="h10 text-placeholder" v-if="item.use_type === 'FULL_DEC'">
					满{{ item.full_money }}可用
				</text>
				<text class="h10 text-placeholder" v-else-if="item.use_type === 'DEC'">
					无门槛
				</text>
				<text class="h10 text-placeholder" v-if="item.end_time">
					有效期至 {{ item.end_time }}
				</text>
				<text class="h10 text-placeholder" v-if="props.item.valid_type == 'DAY'">
					领取后{{ props.item.valid_day }}日内有效
				</text>
				<text class="h10 text-placeholder" v-else-if="props.item.valid_type == 'TIME'">
					有效期至{{ props.item.valid_time[1] }}
				</text>
			</view>
		</slot>
		<slot name="action"></slot>
	</view>
</template>

<script setup lang="ts">
import { ref } from "vue";
const props = withDefaults(defineProps<{
	item: any
}>(), {
	item: {}
});
</script>

<style lang="scss" scoped>
.coupon {
	position: relative;
}

.coupon::before,
.coupon::after {
	content: "";
	position: absolute;
	background-color: $uni-bg-color-grey;
	width: 20upx;
	height: 20upx;
}

.coupon::before {
	top: 0;
	right: 100px;
	border-radius: 0 0 50% 50%;
}

.coupon::after {
	bottom: 0;
	right: 100px;
	border-radius: 50% 50% 0 0;
	/* 底部两个半圆 */
}

.w-90px {
	width: 90px;
}
</style>